<template>
	<f-popup ref="popup" position="bottom">
		<view class="content">
			<view class="head">
				<view class="title">
					<view>选择校园服务商</view>
					<!-- <view class="sub-title">请选择您学生证对应的学校</view> -->
				</view>
				<view class="close" @click="close">
					<text class="iconfont icon-close"></text>
				</view>
			</view>
			
			<view class="body">
				<block v-if="provinces && provinces.length">
					<view class="tabs">
						<view class="tab-item" :class="{'active-tab-item': item.value === activeTab}" v-for="item in tabs" :key="item.value" @click="changeTab(item)">{{item.label}}</view>
					</view>
					
					<view v-if="1 === activeTab">
						<view class="list-label">选择省份</view>
						<scroll-view scroll-y class="scroll">
							<view class="lists">
								<view class="list-item" v-for="(item, index) in provinces" :key="item.value" @click="changeProvinces(item, index)">
									<view class="name">{{item.label}} {{item.count ? `(${item.count})` : ''}}</view>
									<view v-if="provinceValue === item.value">
										<text class="iconfont icon-dagou"></text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-if="2 === activeTab">
						<view class="list-label">选择地市</view>
						<scroll-view scroll-y class="scroll">
							<view class="lists">
								<view class="list-item" v-for="(item, index) in citys" :key="item.value" @click="changeCity(item, index)">
									<view class="name">{{item.label}} {{item.count ? `(${item.count})` : ''}}</view>
									<view v-if="cityValue === item.value">
										<text class="iconfont icon-dagou"></text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-if="3 === activeTab">
						<view class="list-label">选择区县</view>
						<scroll-view scroll-y class="scroll">
							<view class="lists">
								<view class="list-item" v-for="(item, index) in areas" :key="item.value" @click="changeArea(item, index)">
									<view class="name">{{item.label}} {{item.count ? `(${item.count})` : ''}}</view>
									<view v-if="areaValue === item.value">
										<text class="iconfont icon-dagou"></text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-if="4 === activeTab">
						<view class="list-label">选择学校</view>
						<scroll-view scroll-y class="scroll">
							<view class="lists">
								<view class="list-item" v-for="(item, index) in schools" :key="item.value" @click="changeSchool(item, index)">
									<view class="">
										<view class="name">{{item.name}}</view>
										<view class="adddress">{{item.adddress}}</view>
									</view>
									<view v-if="schoolValue === item.value">
										<text class="iconfont icon-dagou"></text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					<view v-if="5 === activeTab">
						<view class="list-label">选择代理商</view>
						<scroll-view scroll-y class="scroll">
							<view class="lists">
								<view class="list-item" v-for="(item, index) in agentList" :key="item.gid" @click="changeAgent(item, index)">
									<view class="">
										<view class=" flex align-center">
											<view class="name">{{item.linkman}}-{{item.name}}</view>
											<view class="tags margin-l16">
												<!-- <view v-if="item.user_is_audit === null" class="tag-item ">未关联</view> -->
												<view v-if="item.user_is_audit === -1" class="tag-item tag-error">已驳回</view>
												<view v-if="item.user_is_audit === 0" class="tag-item tag-wait">审核中</view>
												<view v-if="item.user_is_audit === 1" class="tag-item tag-success">已审核</view>
											</view>
										</view>
										<view class="address">{{item.address}}</view>
									</view>
									<block v-if="item.user_is_audit === 1 || item.user_is_audit === null">
										<view v-if="agentValue === item.gid">
											<text class="iconfont icon-dagou"></text>
										</view>
									</block>
									<block v-if="item.user_is_audit === -1 || item.user_is_audit === 0">
										<view class="iconfont icon-chevron-left"></view>
									</block>
								</view>
								<!-- <view v-if="!loading && agentList.length === 0"></view> -->
								<view v-if="!loading && agentList.length === 0">
									<view class="empty">本地暂无服务商</view>
									<view class="flex align-center justify-center">
										<view class="btn-wrap">
											<button v-if="info.is_agent === -1 || info.is_agent === 0" class="cancel padding-l32 padding-r32" @click="goAgent">申请成为校园服务商</button>
											<button v-else-if="info.is_agent === 100" class="cancel padding-l32 padding-r32" @click="goAgent">代理商申请资料未提交,待支付定金</button>
											<button v-else-if="info.is_agent === 101" class="cancel padding-l32 padding-r32" @click="goAgent">代理商申请资料审核中</button>
											<button v-else-if="info.is_agent === 102" class="cancel padding-l32 padding-r32" @click="goAgent">代理商申请资料通过审核,待支付尾款</button>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</block>
				
				<view style="height: 50vh;" v-else>
					<view class="empty">暂无服务商</view>
					<view class="flex align-center justify-center">
						<view class="btn-wrap" style="min-width: 320rpx;">
							<button v-if="info.is_agent === -1 || info.is_agent === 0" class="cancel padding-l32 padding-r32" @click="goAgent">申请成为校园服务商</button>
							<button v-else-if="info.is_agent === 100" class="cancel padding-l32 padding-r32" @click="goAgent">代理商申请资料未提交,待支付定金</button>
							<button v-else-if="info.is_agent === 101" class="cancel padding-l32 padding-r32" @click="goAgent">代理商申请资料审核中</button>
							<button v-else-if="info.is_agent === 102" class="cancel padding-l32 padding-r32" @click="goAgent">代理商申请资料通过审核,待支付尾款</button>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="activeTab === 5 && agentValue" class="footer-btn">
				<button v-if="agentData.user_is_audit === 1" class="confirm" @click="confirm">确定</button>
				<!-- <button v-else-if="agentData.user_is_audit === null || agentData.user_is_audit === -1" class="confirm" @click="handleAuth">关联认证</button> -->
			</view>
		</view>
	</f-popup>
</template>

<script>
	import provinces from '@/libs/city-data/province.js'
	import city from '@/libs/city-data/city.js'
	import area from '@/libs/city-data/area.js'
	import { mapState } from 'vuex'

	
	export default {
		name:"com-cascader",
		data() {
			return {
				tabs: [
					{ label: '省份', value: 1 },
					{ label: '地市', value: 2 },
					{ label: '区县', value: 3 },
					// { label: '学校', value: 4 },
					{ label: '代理商', value: 5 },
				],
				
				provinces: provinces,
				provinceValue: '',
				citys: [],
				cityValue: '',
				areas: [],
				areaValue: '',
				schoolValue: '',
				agentValue: '',
				schools: [],
				agentList: [],
				activeTab: 1,
				loading: true, // 加载状态
				
				agentData: {}, // 代理商信息
			};
		},
		computed: {
			...mapState('login', ['info'])
		},
		watch: {
			activeTab() {
				if (this.activeTab === 5) {
					this.getAgentList()
				}
			}
		},
		mounted() {
			
		},
		methods: {
			resetData() {
				this.getAgentList()
			},
			// 获取代理商列表
			getAgentList() {
				const params = {
					limit: 9999, // integer  页数 必需 示例值: 10
					page: 1, // integer  页码 必需 示例值: 1
					key: '', // string  搜索：名称/联系人 可选
					provinceCode: this.provinceValue, // string  省，筛选 可选
					cityCode: this.cityValue, // string  市，筛选 可选
					areaCode: this.areaValue, // string  区/县，筛选 可选
				}
				this.loading = true
				this.$api.userAgentListApi(params).then(res=> {
					this.agentList = res.data
					if (this.agentValue) {
						this.agentData = this.agentList.find(item=> item.gid === this.agentValue)
					}
				}).catch(err=> {
					console.log(err)
				}).finally(()=> {
					this.loading = false
				})
			},
			// 获取服务商数量
			getAgrntCount(type) {
				this.$api.userAgentCountApi({a_type: type}).then(res=> {
					if (type === 'provinceCode') {
						for (var i = 0; i < res.data.length; i++) {
							const item = res.data[i]
							const index = this.provinces.findIndex(el=> el.value === item.name)
							if (index !== -1) {
								this.provinces[index].count = item.count
							}
						}
						
						this.provinces = this.provinces.filter(item=> item.count)
					} else if (type === 'cityCode') {
						const idx = provinces.findIndex(item => item.value === this.provinceValue)
						this.citys = city[idx]
						
						for (var i = 0; i < res.data.length; i++) {
							const item = res.data[i]
							const index = this.citys.findIndex(el=> el.value === item.name)
							if (index !== -1) {
								this.citys[index].count = item.count
							}
						}
						
						this.citys = this.citys.filter(item=> item.count)
					} else if (type === 'areaCode') {
						const provinceIndex = provinces.findIndex(el => el.value === this.provinceValue)
						const cityIndex = city[provinceIndex].findIndex(el => el.value === this.cityValue)
						const areas = ''
						this.areas = area[provinceIndex][cityIndex]
						
						for (var i = 0; i < res.data.length; i++) {
							const item = res.data[i]
							const index = this.areas.findIndex(el=> el.value === item.name)
							if (index !== -1) {
								this.areas[index].count = item.count
							}
						}
						this.areas = this.areas.filter(item=> item.count)
					}
					this.$forceUpdate()
				}).catch(err=> {
					console.log(err)
				})
			},
			// 前往申请代理商页面
			goAgent() {
				if (this.info.is_agent === 1) {
					uni.navigateTo({
						url: '/pages/agent/manage/manage'
					})
					return
				}
				if (this.info.is_agent === 100 || this.info.is_agent === 101 || this.info.is_agent === 102) {
					uni.navigateTo({
						url: '/pages/agent/base-info/base-info'
					})
					return
				}
				if (this.info.is_agent === -1 || this.info.is_agent === 0) {
					uni.navigateTo({
						url: '/pages/agent/start/start'
					})
				}
			},
			// 确定
			confirm() {
				const params = {
					province: this.provinceValue,
					city: this.cityValue,
					county: this.areaValue,
					school: this.schoolValue,
					agent: this.agentValue
				}
				this.$emit('confirm', this.agentValue)
				this.reset();
				this.close();
			},
			// 关联认证
			handleAuth() {
				// this.$emit('auth', this.agentValue)
				// this.close();
				const data = this.agentList.find(item => item.gid === this.agentValue)
				uni.showModal({
					title: '认证信息',
					content: `${data.linkman}服务商需要对您的信息进行认证`,
					confirmText: '去认证',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/agent/auth/auth?agentId='+this.agentValue
							})
						}
					}
				})
			},
			// 选择省份
			changeProvinces(item, index) {
				const { value } = item
				this.provinceValue = value
				this.citys = []
				this.cityValue = ''
				this.areas = []
				this.areaValue = ''
				// this.schools = []
				// this.schoolValue = ''
				
				this.activeTab = 2
				this.getAgrntCount('cityCode')
			},
			// 选择城市
			changeCity(item, index) {
				const { value } = item
				this.cityValue = value
				this.areas = []
				this.areaValue = ''
				// this.schools = []
				// this.schoolValue = ''
				
				this.activeTab = 3
				this.getAgrntCount('areaCode')
			},
			// 选择区县
			changeArea(item, index) {
				const { value } = item
				this.areaValue = value
				this.agentList = [];
				this.agentData = {};
				this.agentValue = '';
				// this.schools = []
				// this.schoolValue = ''
				
				// this.activeTab = 4
				this.activeTab = 5
			},
			// 选择学校
			changeSchool(item, index) {
				this.schoolValue = item.value
				this.activeTab = 5
			},
			// 选择代理商
			changeAgent(item, index) {
				if (item.user_is_audit === null) {
					uni.showModal({
						title: '个人信息认证提示',
						content: `您的个人信息未通过该服务商认证，无法租赁`,
						confirmText: '去认证',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/agent/auth/auth?agentId='+item.gid
								})
							}
						}
					})
					// this.agentData = {}
					// this.agentValue = ''
					return
				}
				if (item.user_is_audit === -1 || item.user_is_audit === 0) {
					uni.navigateTo({
						url: '/pages/agent/auth-detail/auth-detail?agentId='+item.gid
					})
					return
				}
				this.agentData = item
				this.agentValue = item.gid
			},
			changeTab(tab) {
				if (tab.value === 2 && !this.provinceValue) return
				if (tab.value === 3 && !this.cityValue) return
				if (tab.value === 5 && !this.areaValue) return
				this.activeTab = tab.value
			},
			reset() {
				this.provinceValue = '';
				this.citys = [];
				this.cityValue = '';
				this.areas = [];
				this.areaValue = '';
				this.schoolValue = '';
				this.agentValue = '';
				this.schools = [];
				this.agentList = [];
				this.activeTab = 1;
				this.loading = true; // 加载状态
			},
			open() {
				this.provinceValue = ''
				this.citys = []
				this.cityValue = ''
				this.areas = []
				this.areaValue = ''
				this.schoolValue = ''
				this.agentValue = ''
				this.schools = []
				this.agentList = []
				this.activeTab = 1
				this.getAgrntCount('provinceCode')
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0 0;
		
		.head {
			position: relative;
			width: 100%;
			padding: 32rpx;
			display: flex;
			min-height: 116rpx;
			align-items: center;
			padding-bottom: 8rpx;
			box-sizing: border-box;
			justify-content: center;
			
			.title {
				font-size: 36rpx;
				font-weight: 600;
				line-height: 52rpx;
				text-align: center;
				color: rgba(0, 0, 0, 0.9);
			}
			
			.sub-title {
				font-size: 24rpx;
				font-weight: 400;
				text-align: left;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 0.4);
			}
			
			.close {
				position: absolute;
				right: 32rpx;
				
				.icon-close {
					font-size: 24rpx;
				}
			}
		}
		
		
		.body {
			
			.tabs {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #E7E7E7;
				
				.tab-item {
					position: relative;
					height: 96rpx;
					padding: 32rpx;
					box-sizing: border-box;
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					font-size: 28rpx;
					font-weight: 400;
					line-height: 44rpx;
					text-align: center;
					color: rgba(0, 0, 0, 0.9);
				}
				
				.active-tab-item {
					color: #000000;
					font-weight: 600;
					
					&::after {
						position: absolute;
						content: '';
						left: 50%;
						bottom: 0;
						width: 52rpx;
						height: 8rpx;
						border-radius: 999px;
						background: var(--gradient-color-vertical);
						transform: translateX(-50%);
					}
				}
			}
			
			.list-label {
				font-size: 28rpx;
				font-weight: 400;
				text-align: left;
				line-height: 44rpx;
				color: rgba(0, 0, 0, 0.4);
				padding: 40rpx 32rpx 16rpx;
			}
			
			.scroll {
				width: 100%;
				height: 50vh;
			}
			
			.lists {
				padding: 0 32rpx;
				padding-bottom: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
				padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
				
				.list-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					width: 100%;
					padding: 32rpx 0;
					// height: 110rpx;
				}
				
				.icon-chevron-left {
					font-size: 42rpx;
				}
				
				.name {
					font-size: 32rpx;
					font-weight: 400;
					text-align: left;
					line-height: 48rpx;
					color: rgba(0, 0, 0, 0.9);
				}
				
				.address {
					font-size: 24rpx;
					font-weight: 400;
					text-align: left;
					line-height:40rpx;
					color: rgba(0, 0, 0, 0.4);
				}
				
				.icon-dagou {
					font-size: 52rpx;
					color: var(--primary-color);
				}
				
				.btn-wrap {
					padding-top: 100rpx;
					min-width: 320rpx;
					max-width: 520rpx;
					margin: 0 auto;
					
					.cancel {
						font-size: 28rpx;
					}
				}
				
				.tags {
					display: flex;
					align-items: center;
					gap: 10rpx;
				}
				
				.tag-item {
					display: flex;
					align-items: center;
					justify-content: center;
				
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
					background-color: #868686;
				
					color: #FFFFFF;
					font-size: 18rpx;
					font-weight: 400;
					line-height: 24rpx;
					text-align: left;
				}
				
				.tag-success {
					background-color: #009D6E;
				}
				
				.tag-complate {
					background-color: #D4D4D4;
				}
				
				.tag-wait {
					background-color: #003D99;
				}
				
				.tag-error {
					background-color: #ff5252;
				}
			}
		}
		
		.footer-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			padding-bottom: calc(16rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			background-color: #FFFFFF;
		}
	}
</style>